<template>
  <div style="background-color: #EEF1F9; width: 100%; min-height: 910px;">
    <div id="register-main">
      <top-part-intro>注册</top-part-intro>
      <div style="width: 100%; min-height: 757px; background-color: white; padding-top: 20px">
        <div style="margin-top: 48px">
          <div class="data-div">
            <label for="stuNumber"><span>*</span>account</label>
            <input
                   class="data-input" id="stuNumber"
                   placeholder="bank id"
                   type="text"
                   v-model="registerData.account">
          </div>
          <div class="data-div">
            <label for="password"><span>*</span>密码</label>
            <input class="data-input" id="password" placeholder="请输入密码" type="password"
                   v-model="registerData.password">
          </div>
          <div class="data-div">
            <label for="passwordAgain"><span>*</span>密码</label>
            <input class="data-input" id="passwordAgain" placeholder="请再次输入密码"
                   type="password" v-model="registerData.passwordAgain">
          </div>
          <div class="data-div">
            <label for="name"><span>*</span>注册码</label>
            <input class="data-input" id="name" placeholder="请输入向联盟申请到的注册码" v-model="registerData.code">
          </div>
          <Button @click="addNow" class="register-now">
            立即添加
          </Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import TopPartIntro from "../components/TopPartIntro"
  import {haveNumber, haveLetter} from "../common/utils";

  export default {
    name: "Register",
    components: {
      TopPartIntro
    },
    data() {
      return {
        registerData: {
          account: '',
          password: '',
          passwordAgain: '',
          code: ''
        }
      }
    },
    methods: {
      addNow() {
        if (this.verifyPassword1() && this.verifyPassword2()) {
          this.$http.post('/register/', this.qs.stringify(this.registerData))
          .then(res => {
            if (res.data.code === 0)  // register failed
              this.$Message.info(res.data.msg);
            else {
              this.$Message.info("成功添加用户");
            }
          })
        } else {
          return false;
        }
      },
      verifyPassword1() {
        // 先判断密码是否同时包含数字和字母
        if (haveNumber(this.registerData.password) && haveLetter(this.registerData.password)) {
          // 密码位数不小于8位不多于15位
          if ((this.registerData.password.length < 8) || (this.registerData.password.length > 15)) {
            this.$Message.info("密码位数应该不少于8位且不多于15位");
            return false;
          } else {
            return true;
          }
        } else {
          this.$Message.info("密码应该同时包含数字和字母");
          return false;
        }
      },
      verifyPassword2() {
        // 判断前后两次密码是否一致
        if (this.registerData.password !== this.registerData.passwordAgain) {
          this.$Message.info("两次输入密码不一致");
          return false;
        } else {
          return true;
        }
      }
    },
  }
</script>

<style scoped>
  #register-main {
    width: 1000px;
    min-height: 850px;
    margin: 0 auto;
  }

  .data-div {
    height: 40px;
    margin-bottom: 16px;
    display: flex;
    margin-left: 270px;
  }

  .data-div label {
    width: 100px;
    height: 14px;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    margin-top: 11px;
    cursor: pointer;
  }

  .data-div label span {
    color: #FF6201;
  }

  .data-input {
    width: 300px;
    height: 40px;
    border: 1px solid rgb(209, 209, 209);
    border-radius: 3px;
    margin-left: 5px;
    text-indent: 15px;
    font-size: 18px;
  }

  .data-input::placeholder {
    font-size: 14px;
    font-family: Microsoft YaHei, serif;
    color: rgba(179, 179, 179, 1);
  }

  .register-now {
    width: 300px;
    height: 42px;
    background: rgba(0, 70, 140, 1);
    border-radius: 3px;
    margin-left: 375px;
    color: white;
  }
</style>
